<template>
  <el-dialog
    title="预览样表"
    :visible.sync="visible"
    width="80%"
  >
    <div class="dialog-content">
        <iframe class="iframe" :src="url"/>
    </div>
    <span slot="footer" class="dialog-footer">
    <el-button @click="visible = false">取 消</el-button>
    <el-button type="primary" @click="confirm">确 定</el-button>
  </span>
  </el-dialog>

</template>

<script>
export default {
  name: "FormExample",
  props: {
    value:{
      type: Boolean,
      default: false
    },
    url:{
      type: String,
      default: "http://121.33.195.139:15381/prod-api/service/doc/preview?docId=536C83A0-EF4A-4908-AEC7-A7DDD25FA714"
    },
  },
  computed:{
    visible: {
      get() {
        return this.value;
      },
      set(value) {
        this.$emit("input", value);
      }
    }
  },
  methods:{
    confirm(){
      this.visible = false;
    }
  },
}
</script>

<style lang="scss" scoped>
.iframe{
  width: 100%;
  min-width: 600px;
  height: 70vh;
  overflow: auto;
}
</style>
